import React, {useEffect} from "react";
import {useHistory} from "react-router-dom";
import Swiper from "swiper";
import CarInfo from "@/components/CarInfo";
import {IRotationImg} from "@/common/model";
import './index.scss'

const RotationChart: React.FC<any> = (props) => {

  console.log("-------RotationChart---------")
  // const {rotationImg} = props
  const rotationImg: IRotationImg[] = props.rotationImg
  const history = useHistory();

  const goToDetail = (item: any) => {
    history.push({pathname: `/tesla/car/${item.id}`, state: item})
  }

  useEffect(() => {
    setTimeout(() => {
      new Swiper('.swiper-container', {
        loop: true,
        autoplay: {
          delay: 1500
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true
        }
      })
    }, 100);
  }, [])

  return (
    <div className="Rotation">
      <div className="swiper-container">
        <div className="swiper-wrapper">
          {
            rotationImg.map((item, index) => {
              return (
                <div className="swiper-slide" key={index}>
                  <a className='carName'>{item.name}</a>
                  <CarInfo res={item}/>
                  <div>
                    <img className='rotationChart-img' src={item.picUrl} alt=""/>
                  </div>
                  <button onClick={() => goToDetail(item)} className='carBuy'>立即订购</button>
                </div>
              )
            })
          }
        </div>
        <div className="swiper-pagination"/>
      </div>
    </div>
  )
}

export default RotationChart
